<template>
  <div style="height: 100%;">
    <div class="high" v-show="result === ''" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/high/bg.jpg' + ')'}">
      <div class="high-bg" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/middle/bg-1.png' + ')'}">
        <img class="high-top" :src="cdnUrl + '/assets/primary/' + pageNum + '.png'" alt="" />
        <div class="high-problem" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/high/problem.png' + ')'}">
          <div class="pro-top">
            <p>{{pageNum}}/8</p>
          </div>
          <div class="pro-list">
            <transition name="fade">
              <p v-show="textFlag">{{list[pageNum-1].text}}</p>
            </transition>
          </div>
        </div>
        <div class="high-list">
          <div class="list">
            <div class="list-li" @click="toChoose('A')">
              <div class="li-true">
                <img class="li-true" v-show="answer.length !== 0" :src="answer.length === 0? '': answer.indexOf('A') !== -1? cdnUrl + '/assets/middle/right.png' : cdnUrl + '/assets/middle/wrong.png'" alt="" />
              </div>
              <img class="li-choose" :src="chooseFlag.indexOf('A') !== -1? cdnUrl + '/assets/high/a-y.png' : cdnUrl + '/assets/high/a-w.png'" alt="" />
              <p>{{list[pageNum-1].A}}</p>
            </div>
            <div class="list-li" @click="toChoose('B')">
              <div class="li-true">
                <img class="li-true" v-show="answer.length !== 0" :src="answer.length === 0? '': answer.indexOf('B') !== -1? cdnUrl + '/assets/middle/right.png' :  cdnUrl + '/assets/middle/wrong.png'" alt="" />
              </div>
              <img class="li-choose" :src="chooseFlag.indexOf('B') !== -1?  cdnUrl + '/assets/high/b-y.png' : cdnUrl + '/assets/high/b-w.png'" alt="" />
              <p>{{list[pageNum-1].B}}</p>
            </div>
            <div class="list-li" @click="toChoose('C')">
              <div class="li-true">
                <img class="li-true" v-show="answer.length !== 0" :src="answer.length === 0? '': answer.indexOf('C') !== -1? cdnUrl + '/assets/middle/right.png' : cdnUrl + '/assets/middle/wrong.png'" alt="" />
              </div>
              <img class="li-choose" :src="chooseFlag.indexOf('C') !== -1? cdnUrl + '/assets/high/c-y.png' : cdnUrl + '/assets/high/c-w.png'" alt="" />
              <p>{{list[pageNum-1].C}}</p>
            </div>
            <div class="list-li" v-show="list[pageNum-1].D" @click="toChoose('D')">
              <div class="li-true">
                <img class="li-true" v-show="answer.length !== 0" :src=" answer.length === 0? '':answer.indexOf('D') !== -1? cdnUrl + '/assets/middle/right.png' : cdnUrl + '/assets/middle/wrong.png'" alt="" />
              </div>
              <img class="li-choose" :src="chooseFlag.indexOf('D') !== -1? cdnUrl + '/assets/high/d-y.png' : cdnUrl + '/assets/high/d-w.png'" alt="" />
              <p>{{list[pageNum-1].D}}</p>
            </div>
          </div>
        </div>
        <div class="high-true" @click="toSubmit">
          <img :src="cdnUrl + '/assets/high/true.png'" alt="" />
        </div>
      </div>
    </div>
    <Result v-if="result !== ''" :result="result" @goReturns="goReturns"></Result>
  </div>
</template>

<script>
import { getProList } from '../../utils/index'
import Result from './Result'
import { getAnswerResult, getResult } from '../../service'
import { cdnUrl } from '../../service/env'

export default {
  name: 'High',
  props: {
    id: String,
    goReturn: Function
  },
  data () {
    return {
      list: getProList(3),
      pageNum: 1,
      chooseFlag: [],
      answer: [],
      clickFlag: true,
      result: '',
      textFlag: false,
      cdnUrl: cdnUrl
    }
  },
  components: {
    Result
  },
  mounted () {
    setTimeout(() => {
      this.textFlag = true
    }, 100)
  },
  methods: {
    // 点击选择
    toChoose (param) {
      if (this.chooseFlag.indexOf(param) === -1) {
        this.chooseFlag.push(param)
      } else {
        this.chooseFlag.splice(this.chooseFlag.indexOf(param), 1)
      }
    },
    // 点击提交
    toSubmit () {
      if (this.clickFlag) {
        this.clickFlag = false
        this.chooseFlag = this.chooseFlag.sort().join('')
        getAnswerResult(this.id, this.chooseFlag, this.list[this.pageNum - 1].id).then((data) => {
          if (data.success === 'true') {
            this.answer = data.data.answer.split('')
            setTimeout(() => {
              this.clickFlag = true
              this.goNext()
            }, 1500)
          }
        }).catch(() => {
          this.clickFlag = true
        })
      }
    },
    // 下一题
    goNext () {
      if (this.pageNum < 8) {
        this.textFlag = false
        this.pageNum++
        this.chooseFlag = []
        this.answer = []
        setTimeout(() => {
          this.textFlag = true
        }, 250)
      } else {
        if (this.clickFlag) {
          this.clickFlag = false
          getResult(this.id).then((data) => {
            this.clickFlag = true
            this.result = data.success
          })
        }
      }
    },
    // 再来一次
    goReturns () {
      this.$emit('goReturn')
    }
  }
}
</script>

<style scoped lang="scss">
.fade-enter-active{
  transition: opacity 0.25s ease-out;
}
.fade-enter{
  opacity: 0;
}
.high {
  width: 100%;
  height: 100%;
  // background: url("../../assets/high/bg.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .high-bg {
    width: 92%;
    height: 450px;
    // background: url("../../assets/middle/bg-1.png") no-repeat;
    background-size: 100% 100%;
    margin: 18px auto 0;
    overflow: hidden;
    .high-top {
      width: 40.6%;
      height: 102px;
      margin: 8px auto 32px;
    }
    .high-problem {
      width: 93%;
      height: 100px;
      margin: -16px auto 0;
      // background: url("../../assets/high/problem.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      overflow: hidden;
      .pro-top {
        width: 42%;
        height: 25.5px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -1px auto 0;
        background-size: 100% 100%;
        p {
          font-size: 14px;
          color: #000000;
          text-align: center;
          line-height: 21px;
          font-weight: 600;
        }
      }
      .pro-list {
        width: 78.6%;
        height: 53px;
        overflow: hidden;
        margin: 30px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          font-size: 13px;
          color: #000000;
          font-weight: 600;
        }
      }
    }
    .high-list{
      width: 94%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      margin: 18px auto 0;
      .list{
        margin: 0 auto;
        .list-li{
          overflow: hidden;
          margin-bottom: 17px;
          .li-true{
            float: left;
            width: 14px;
            margin-right: 4px;
            margin-top: 1px;
            img{
              width: 100%;
            }
          }
          .li-choose{
            margin-right: 4px;
            float: left;
            width: 17px;
          }
          p{
            max-width: 84%;
            float: left;
            font-size: 10px;
            color: #000000;
            line-height: 18px;
          }
        }
      }
    }
    .high-true{
      width: 24%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: 450px auto 0;
      img{
        width: 100%;
      }
    }
  }
}
</style>
